/*
 * @Description: 非好友用户资料
 * @Author: fhw
 * @Date: 2023-01-15 14:21:37
 */
import { IconMale, IconGirl } from '@/components/icon'
import { User } from '@/interface'
import { isTrue } from '@/utils/tools'
import { equals } from 'ramda'
import { defineComponent, h, PropType, reactive } from 'vue'
import { UserSetUpMenuItem } from '../interface'
import UserImg from '../userImg'
import Icon from '@ant-design/icons-vue'
import './style.scss'
const props = {
	loading: Boolean as PropType<boolean>,
	dataSource: {
		type: Object as PropType<User>,
		required: true,
	},
} as const
export default defineComponent({
	props,
	setup(props) {
		const menu = reactive<UserSetUpMenuItem[]>([
			{
				title: '地区',
				hide: false,
				slots: <span>广东 东莞</span>,
			},
		])
		return () => (
			<div id="strange">
				<div class="header">
					<div class="strange-info">
						<div class="name">
							{props.dataSource.username}
							{equals(props.dataSource?.sex, '男') ? (
								<IconMale fontSize={18} style="margin-left: 4px" />
							) : (
								<IconGirl fontSize={18} style="margin-left: 4px" />
							)}
						</div>
						<div class="signature">
							{isTrue(props.dataSource.signature) ? props.dataSource.signature : '这人很懒，什么都没有留下'}
						</div>
					</div>
					<div class="user-img">
						<UserImg iconSize={70} imgSize={70} headimgurl={props.dataSource?.headimgurl} />
					</div>
				</div>
				<main>
					<ul class="strange-menu">
						{menu.map((item) => {
							return (
								<li class="strange-menu-item strange-item">
									<p>{item.title}</p>
									<p>{h(item.slots)}</p>
								</li>
							)
						})}
					</ul>
				</main>
				<footer>
					{/* 聊天信息 */}
					<ul class="strange-chat">
						<li class="strange-chat-item strange-item">
							{/* <p>{item.title}</p>
							<p>{h(item.slots)}</p> */}
						</li>
					</ul>
					<div class="strange-footer-btn">
						<Icon
							component={() => (
								<svg
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="9936"
									width="28"
									height="28"
								>
									<path
										class="strange-chat-btn"
										d="M171.008 964.398545c-43.938909 0-70.306909-11.729455-76.288-33.931636-2.746182-10.216727-2.746182-30.045091 28.16-48.011636 24.855273-14.475636 47.569455-36.189091 67.677091-64.651636-117.946182-86.481455-185.134545-212.689455-185.134545-349.556364 0-249.693091 227.188364-452.864 506.414545-452.864 279.435636 0 506.740364 203.147636 506.740364 452.864 0 249.739636-227.328 452.933818-506.717091 452.933818-49.664 0-99.281455-6.702545-147.618909-19.921455C296.471273 947.688727 220.695273 964.398545 171.008 964.398545zM155.368727 917.108364c4.375273 0.465455 9.588364 0.744727 15.639273 0.744727 44.637091 0 114.082909-15.965091 175.104-60.765091l9.285818-6.842182 11.077818 3.281455c47.522909 14.033455 96.418909 21.131636 145.384727 21.131636 253.742545 0 460.171636-182.295273 460.171636-406.388364 0-224.046545-206.452364-406.318545-460.194909-406.318545-253.579636 0-459.869091 182.272-459.869091 406.318545 0 128.186182 66.816 246.295273 183.319273 324.049455l18.571636 12.404364-11.613091 19.060364C217.530182 864.395636 188.322909 895.720727 155.368727 917.108364z"
										fill="#2B2B2B"
										p-id="9937"
									></path>
								</svg>
							)}
						/>
					</div>
				</footer>
			</div>
		)
	},
})
